<template>
  <div class="batch_check_set_wrapper">
    <div class="title">检查设置</div>
    <div class="radioitem">
      <label>是否检查</label>
      <ul class="radio">
        <li @click="changeCS(true)" :class="{'selected':checkStatus==true}">检查</li>
        <li @click="changeCS(false)" :class="{'selected':checkStatus==false}">不检查</li>
      </ul>
    </div>
    <div class="checkhide" v-show="checkStatus">
      <div class="hideline">
        <label>检查数据类型</label>
        <div class="typeli">
          <span @click="changeCType(1)" :class="{'hover':checkType==1}">所有数据</span>
          <span @click="changeCType(2)" :class="{'hover':checkType==2}">好数据</span>
          <span @click="changeCType(3)" :class="{'hover':checkType==3}">坏数据</span>
        </div>
      </div>
      <div class="hideline">
        <label>检查比例设置</label>
        <div class="typeli">
          <input type="number" v-model="checkVal" />
          <i>(%百分比,最低比例不可为0)</i>
        </div>
      </div>
    </div>
    <div class="radioitem">
      <label>是否质检</label>
      <ul class="radio">
        <li @click="changeTS(true)" :class="{'selected':testStatus==true}">检查</li>
        <li @click="changeTS(false)" :class="{'selected':testStatus==false}">不检查</li>
      </ul>
    </div>
    <div class="checkhide" v-show="testStatus">
      <div class="hideline">
        <label>检查数据类型</label>
        <div class="typeli">
          <span @click="changeTType(1)" :class="{'hover':testType==1}">所有数据</span>
          <span @click="changeTType(2)" :class="{'hover':testType==2}">好数据</span>
          <span @click="changeTType(3)" :class="{'hover':testType==3}">坏数据</span>
        </div>
      </div>
      <div class="hideline">
        <label>检查比例设置</label>
        <div class="typeli">
          <input type="number" v-model="testVal" />
          <i>(%百分比,最低比例不可为0)</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MarkEnvironmentSet',
  props: {
    comInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      checkType: 1, //检查数据类型
      checkVal: 100, //检查比例
      testStatus: false, //是否质检
      testType: 1, //质检数据类型
      testVal: 100, //质检比例
      /// 公用
      checkStatus: false,
    }
  },
  created() {

  },
  mounted() {

  },
  watch: {
    comInfo: {
      handler(val) {
        if (!val) return;
        Object.keys(val).forEach(key => {
          if (this.hasOwnProperty(key)) {
            this[key] = val[key]
          }
        })
      },
      immediate: true
    }
  },
  methods: {
    changeCS: function (flag) {
      this.checkStatus = flag;
      this.$bus.$emit('batchSetIsCheck', flag)
    },
    changeTS: function (flag) {
      this.testStatus = flag;
    },
    changeCType: function (n) {
      this.checkType = n;
    },
    changeTType: function (n) {
      this.testType = n;
    },
    // 组件校验
    validate() {
      let reg = /^[0-9]*[1-9][0-9]*$/; //正整数
      if (this.checkStatus && !reg.test(Number(this.checkVal))) {
        this.ui.fade("检查比例必须是大于0小于等于100的正整数");
        return false;
      } else if (this.checkStatus && Number(this.checkVal) > 100) {
        this.ui.fade("检查比例必须是大于0小于等于100的正整数");
        return false;
      } else if (this.testStatus && !reg.test(Number(this.testVal))) {
        this.ui.fade("质检比例必须是小于等于100的正整数");
        return false;
      } else if (this.testStatus && Number(this.testVal) > 100) {
        this.ui.fade("质检比例必须是小于等于100的正整数");
        return false;
      }
      return true
    },
    // 外部获取当前组件的值 
    getComponentVal() {
      return {
        checkStatus: this.checkStatus,
        checkType: this.checkType, //检查数据类型
        checkVal: this.checkVal, //检查比例
        testStatus: this.testStatus, //是否质检
        testType: this.testType, //质检数据类型
        testVal: this.testVal, //质检比例
      }
    }
  }
}
</script>

<style lang="less" scoped>
button,
input,
select,
textarea {
  font-size: 14px;
}
.batch_check_set_wrapper {
  .title {
    color: #5e6a68;
    font-size: 16px;
    font-weight: 700;
    line-height: 48px;
    display: block;
    position: relative;
    padding-left: 14px;
    margin-top: 10px;
    &::before {
      position: absolute;
      left: 0;
      top: 17px;
      width: 4px;
      height: 15px;
      display: block;
      background: #07d569;
      content: "";
    }
    p {
      padding: 5px 23px;
      display: inline;
      font-size: 12px;
      font-weight: normal;
      color: #e07900;
    }
  }
  .radioitem {
    height: 34px;
    line-height: 14px;
    margin: 15px 0 15px 0;
    .radio {
      height: 14px;
      line-height: 14px;
      float: left;
      margin-top: 10px;
      width: auto;
      margin-left: 0;
      li {
        margin-right: 40px;
        font-size: 14px;
        color: #333;
        cursor: pointer;
        padding-left: 22px;
        display: inline-block;
        background: url("~@/assets/images/common/radio.png") no-repeat -119px 0;
        float: left;
        width: auto;
      }
      li.selected {
        background-position: 0 0;
      }
      li.selected[type="cursor"] {
        cursor: default;
      }
    }
    label {
      width: 100px;
      padding-right: 10px;
      text-align: right;
      float: left;
      line-height: 34px;
      color: #666;
    }
  }
  .checkhide {
    background: #fafafa;
    border-left: 4px solid #fff;
    margin-top: 5px;
    padding: 12px 0;
    .hideline {
      height: 37px;
      line-height: 37px;
      margin-bottom: 15px;
      label {
        width: 180px;
        padding-right: 20px;
        text-align: right;
        display: inline-block;
        float: left;
      }
      .typeli {
        display: inline-block;
        position: relative;
        font-size: 0;
        float: left;
        span {
          width: 108px;
          line-height: 35px;
          background: #fff;
          height: 37px;
          border: 1px solid #ececec;
          text-align: center;
          color: #969696;
          display: inline-block;
          margin-right: 17px;
          font-size: 14px;
          -webkit-border-radius: 2px;
          -moz-border-radius: 2px;
          -ms-border-radius: 2px;
          -o-border-radius: 2px;
          border-radius: 2px;
        }
        span.hover {
          border-color: #16cb6d;
          background: #e0fdee;
          color: #16cb6d;
          position: relative;
          cursor: pointer;
        }
        span.hover:after {
          position: absolute;
          right: 0;
          bottom: 0;
          width: 22px;
          height: 22px;
          display: block;
          content: "";
          background: url("~@/assets/images/common/work-team/task_select_ico.png")
            no-repeat 0 0;
        }
        input {
          line-height: 17px;
          padding: 10px;
          border: 1px solid #cacaca;
          width: 233px;
        }
        i {
          font-style: normal;
          color: #999;
          position: absolute;
          left: 243px;
          top: 0;
          line-height: 37px;
          font-size: 14px;
          width: 200px;
        }
      }
      &:last-child {
        margin: 0;
      }
    }
  }
}
</style>
